{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}语音识别模型基准测试系统 - 语音识别模型{% endblock %}

{% block page_content %}
<div class="page-header">
    <a href="{{ url_for('.model') }}">返回语音识别模型主页</a>
    {% if is_edit %}
    <h1>编辑</h1>
    {% else %}
    <h1>新增</h1>
    {% endif %}
</div>
<div class="col-md-4">
    <form action="#" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="id" value="{{ id }}" id="id-input">
        <p>名称：<br>
            <input type="text" name="name" value="{{ name }}" required maxlength="20" id="name-input"><span id="name-err-msg" style="color:red;"></span>
        </p>
        <p>备注：<input type="text" value="{{ note }}" name="note" id="note-input"></p>
        <p id="acoustic-model-p">声学模型名称：<br>
        <input type="text" name="acoustic_model_name" id="acoustic_model_name" value="{{ acoustic_model_name }}"><a class="btn btn-default" href="javascript:void(0)" onclick="select_acoustic_model_name(1)">+</a></p>
        <div id="acoustic-model-div"></div>
        <p id="lexicon-dict-p">发音字典名称：<br>
        <input type="text" name="lexicon_dict_name" id="lexicon_dict_name" value="{{ lexicon_dict_name }}"><a class="btn btn-default" href="javascript:void(0)" onclick="select_lexicon_dict_name(1)">+</a></p>
        <div id="lexicon-dict-div"></div>
        <p id="language-model-p">语言模型名称：<br>
        <input type="text" name="language_model_name" id="language_model_name" value="{{ language_model_name }}"><a class="btn btn-default" href="javascript:void(0)" onclick="select_language_model_name(1)">+</a></p>
        <div id="language-model-div"></div>
        <p id="decoder-p">解码器名称：<br>
        <input type="text" name="decoder_name" id="decoder_name" value="{{ decoder_name }}"><a class="btn btn-default" href="javascript:void(0)" onclick="select_decoder_name(1)">+</a></p>
        <div id="decoder-div"></div>
        <p><button type="submit" id="submit-input">提交</button></p>
    </form>
</div>
<script type="text/javascript">
    function select_acoustic_model_name(page){
        var div_html='';
        $.getJSON('/exec/acoustic_model?page='+page,function(data){
            let acoustic_models=data['acoustic_models'];
            let page_range=data['page_range'];
            for(let i=0;i<acoustic_models.length;i++){
                div_html+='<a href="/am/'+acoustic_models[i][0]+'">'+acoustic_models[i][1]+'</a> <button onclick="$(\'#acoustic_model_name\').val(\''+acoustic_models[i][1]+'\');" type="button">选择</button> ';
            }
            div_html+='<br><ul class="pagination">';
            for(let i=0;i<page_range.length;i++){
                if(page==page_range[i]){
                    div_html+='<li class="active">'+page+'</li>';
                }else{
                    div_html+='<li><a href="javascript:void(0)" onclick="select_acoustic_model_name('+page_range[i]+')">'+page_range[i]+'</a></li>';
                }
            }
            div_html+='</ul><a href="/acoustic_model_add">添加新的声学模型</a>';
            $('#acoustic-model-div').html(div_html);
        });
    };
    function select_lexicon_dict_name(page){
        let div_html='';
        $.getJSON('/exec/lexicon_dict?page='+page,function(data){
            let lexicon_dicts=data['lexicon_dicts'];
            let page_range=data['page_range'];
            for(let i=0;i<lexicon_dicts.length;i++){
                div_html+='<a href="/ld/'+lexicon_dicts[i][0]+'">'+lexicon_dicts[i][1]+'</a> <button onclick="$(\'#lexicon_dict_name\').val(\''+lexicon_dicts[i][1]+'\');" type="button">选择</button> ';
            }
            div_html+='<br><ul class="pagination">';
            for(let i=0;i<page_range.length;i++){
                if(page==page_range[i]){
                    div_html+='<li class="active">'+page+'</li>';
                }else{
                    div_html+='<li><a href="javascript:void(0)" onclick="select_lexicon_dict_name('+page_range[i]+')">'+page_range[i]+'</a></li>';
                }
            }
            div_html+='</ul><a href="/lexicon_dict_add">添加新的发音字典</a>';
            $('#lexicon-dict-div').html(div_html);
        });
    };
    function select_language_model_name(page){
        let div_html='';
        $.getJSON('/exec/language_model?page='+page,function(data){
            let language_models=data['language_models'];
            let page_range=data['page_range'];
            for(let i=0;i<language_models.length;i++){
                div_html+='<a href="/language_model/'+language_models[i][0]+'">'+language_models[i][1]+'</a> <button onclick="$(\'#language_model_name\').val(\''+language_models[i][1]+'\');" type="button">选择</button> ';
            }
            div_html+='<br><ul class="pagination">';
            for(let i=0;i<page_range.length;i++){
                if(page==page_range[i]){
                    div_html+='<li class="active">'+page+'</li>';
                }else{
                    div_html+='<li><a href="javascript:void(0)" onclick="select_language_model_name('+page_range[i]+')">'+page_range[i]+'</a></li>';
                }
            }
            div_html+='</ul><a href="/lm_add">添加新的语言模型</a>';
            $('#language-model-div').html(div_html);
        });
    };
    function select_decoder_name(page){
        let div_html='';
        $.getJSON('/exec/decoder?page='+page,function(data){
            let decoders=data['decoders'];
            let page_range=data['page_range'];
            for(let i=0;i<decoders.length;i++){
                div_html+='<a href="/dcdr/'+decoders[i][0]+'">'+decoders[i][1]+'</a> <button onclick="$(\'#decoder_name\').val(\''+decoders[i][1]+'\');" type="button">选择</button> ';
            }
            div_html+='<br><ul class="pagination">';
            for(let i=0;i<page_range.length;i++){
                if(page==page_range[i]){
                    div_html+='<li class="active">'+page+'</li>';
                }else{
                    div_html+='<li><a href="javascript:void(0)" onclick="select_decoder_name('+page_range[i]+')">'+page_range[i]+'</a></li>';
                }
            }
            div_html+='</ul><a href="/decoder_add">添加新的解码器</a>';
            $('#decoder-div').html(div_html);
        });
    };
    function check_model_name(){
        var name_pass;
        $.ajaxSetup({async:false});
        $.getJSON('/exec/check_model_name?name='+$('#name-input').val()+'&id='+$('#id-input').val(),function(data){
            name_pass=data['res'];
        });
        if(! name_pass){
            $('#name-err-msg').text('语音识别模型名称与已存在的模型名称重复，请更名');
        }
        return name_pass;
    };
    $('#submit-input').click(check_model_name);
</script>
{% endblock %}